<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多工作表数据导入</title>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <style>
        .el-upload__tip {
            margin-top: -14px;
        }

        td{
            border: 1px solid #ccc;
        }
    </style>


</head>
<body>
<div id="app"  >
    <div style="padding-top: 25px;" v-if="div_show1">
        <el-form label-position="right" label-width="125px" size="mini" >
            <el-form-item label="文件上传">
                <el-upload
                        class="upload-demo"
                        drag :on-success="uploadSuccess"
                        :action="wwwurl+'/admin/api/UploadController/elementUiUploadDopostFileUpload'"
                        :headers="headers" >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
                </el-upload>
            </el-form-item>

        </el-form>
    </div>
    <div v-if="div_show2" style="padding: 25px;">
        <el-form label-position="right" label-width="125px" size="mini" >
            <el-form-item label="工作表选择">
                <el-checkbox-group v-model="formData.checkList">
                    <el-checkbox :label="sheet" v-for="sheet in sheets" :key="sheet">{{sheet}}</el-checkbox>

                    <el-button type="danger" @click="startImport" style="margin-left: 15px;">导入</el-button>

                </el-checkbox-group>


            </el-form-item>


            <el-form-item label="字段匹配">
                <div>
                    <el-tabs v-model="activeName" type="card"  @tab-click="handleClick">
                        <el-tab-pane v-for="(item,index) in formData.checkList" :label="item" :name="item">
                            <div style="margin-bottom: 6px;">
                                <div style="display: inline-block;margin-right: 3px;">
                                    表头数据行:<el-input v-model="formData[item]['header_row']" placeholder="表头数据行" style="width: 60%;"></el-input>
                                </div>

                                <div style="display: inline-block;margin-right: 3px;">
                                    第一个数据行:<el-input v-model="formData[item]['data_start_row']" placeholder="第一个数据行" style="width: 60%;"></el-input>
                                </div>

                                <div style="display: inline-block;margin-right: 3px;">
                                    最后一个数据行:<el-input v-model="formData[item]['data_end_row']" placeholder="最后一个数据行"style="width: 60%;" ></el-input>
                                </div>
                                <el-button type="primary" @click="getDataForSheet(item)">获取数据</el-button>
                                <el-button type="danger" @click="set2SheetAll(item)" >应用所有工作表</el-button>
                            </div>

                            <table width="100%" border="1" style="text-align: center;">
                                <tr>
                                    <td v-for="(ic,index1) in columns[item]">
                                        <div style="padding: 3px;">
                                            <el-select v-model="formData['col_name_pipei'][item][''+index1]" placeholder="请选择">
                                                <el-option
                                                        v-for="item_col in col_name_list"
                                                        :key="item_col.col_name"
                                                        :label="item_col.show_name"
                                                        :value="item_col.col_name">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </td>
                                </tr>

                                <tr v-for="(item1,index1) in tableData">
                                    <td v-for="(ic,index2) in columns[item]">
                                        {{item1[""+index2]}}
                                    </td>
                                </tr>
                            </table>

                        </el-tab-pane>

                    </el-tabs>
                </div>

            </el-form-item>
        </el-form>
    </div>

    <div v-if="div_show3" style="padding: 25px;">
        <el-form label-position="right" label-width="125px" size="mini" >
            <el-form-item label="导入进度">
                <div>
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="proInfo.pro"></el-progress>
                </div>
                <div>{{proInfo.msg}}</div>

            </el-form-item>



            <el-form-item label="导入失败记录">
                <div style="padding-bottom: 5px;">
                    <el-button type="primary" @click="getErrorListdata" >刷新</el-button>
                </div>
                <el-table
                        :data="errorListData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="sj"
                            label="导入时间"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="data_txt"
                            label="数据"
                            width="400">
                    </el-table-column>

                    <el-table-column
                            prop="error"
                            label="错误信息"
                            width="200">
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script>

    var vm = new Vue({
        el:"#app",
        data:{
            tableId:"",
            headers: {
                token: localStorage.getItem("token")
            },
            div_show1:true,
            div_show2:false,
            div_show3:false,
            excel_path:"",
            activeName: '',
            sheets:[],
            formData:{checkList:[],col_name_pipei:{},"common":{header_row:1,data_start_row:2,data_end_row:""}},
            columns:{},
            tableData: [],
            col_name_list:[],
            proInfo:{},
            errorListData:[],
            pageNumber:1,
            pageSize:50,
            ddbh:"",
            parmsData:{},
        },
        created(){
            this.parmsData = getParams();
            this.tableId = this.parmsData.tableId;
            this.getColumnsForTable();
        },
        methods:{
            set2SheetAll(sheetName){
                for(let a=0;a<this.formData.checkList.length;a++){
                    this.formData[this.formData.checkList[a]] = this.formData[sheetName];
                    this.formData['col_name_pipei'][this.formData.checkList[a]] = this.formData['col_name_pipei'][sheetName];
                }
                top.alert("操作成功！");
            },
            //开始导入
            async startImport(){
                const res = await postBody("/admin/api/DataManagementController/StartImportingDataEvent2",{tableId:this.tableId,sheets:""+this.formData.checkList,path:this.excel_path,formData:this.formData});
                if(res.code == 0){
                    top.alert(res);
                    return;
                }
                this.ddbh = res.data;
                this.div_show2 = false;
                this.div_show3 = true;
                this.getImportProInfo();
            },
            //获取导入进度
            async getImportProInfo(){
                const res = await post("/admin/api/ColumnManagementController/getImportExcelProInfo",{});
                if(res.code == 0){
                    return;
                }
                this.proInfo = res.data;
                let pro = Number(this.proInfo.pro);
                if(pro < 100){
                    this.getImportProInfo();
                }else {
                    this.getErrorListdata();
                }
            },
            //获取导入失败记录
            async getErrorListdata(){
                let parm = {
                    orderBy: "id desc",
                    tableId: "",
                    other: {ddbh:this.ddbh},
                    pageNumber:""+this.pageNumber,
                    pageSize : ""+this.pageSize
                }
                let i = load();
                const res = await postBody("/admin/api/ColumnManagementController/importErrorPagelist",parm);
                layer.close(i);
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                this.errorListData = res.data.rows;
                // this.total = parseInt(res.data.total);
                // this.pageSize = parseInt(res.data.pageSize);
                // this.pageCount = parseInt(res.data.pageCount);
            },
            //获取所有字段
            async getColumnsForTable(){
                const res = await post("/admin/api/DataManagementController/GetAllFieldsInTheTableEvent2",{tableId:this.tableId});
                if(res.code == 0){
                    top.alert(res);
                    return;
                }
                this.col_name_list = res.data;
            },
            async getDataForSheet(sheet_name){
                let obj = this.formData[sheet_name];
                obj.sheet_name = sheet_name;
                obj.path = this.excel_path;
                obj.tableId = this.tableId;
                const res = await postBody("/admin/api/DataManagementController/GetHeaderAndDataEvent2",obj);
                if(res.code == 0){
                    top.alert(res);
                    return;
                }
                this.columns[sheet_name] = res.data.columns;
                for(let k in res.data.col_name_pipei){
                    let v = this.formData.col_name_pipei[sheet_name][k];
                    if(v == "" || v == undefined || v == null){
                        Vue.set(this.formData.col_name_pipei[sheet_name],k,res.data.col_name_pipei[k]);
                    }
                }

                this.$nextTick(function (){
                    this.tableData = res.data.tableList;
                });

            },
            async getSheets(){
                load();
                const res = await postBody("/admin/api/DataManagementController/GetAllWorksheetsEvent2",{path:this.excel_path,tableId:this.tableId});
                layer.closeAll();
                if(res.code == 0){
                    top.alert(res);
                    return;
                }
                this.sheets = res.data.list;
                this.formData.checkList = this.sheets;
                for(let a=0;a<this.sheets.length;a++){
                    Vue.set(this.formData,this.sheets[a],res.data[this.sheets[a]]);
                    Vue.set(this.formData["col_name_pipei"],this.sheets[a],res.data[this.sheets[a]].col_name_pipei);
                }
                if(this.sheets.length > 0){
                    this.activeName = this.sheets[0];
                    this.getDataForSheet(this.activeName);
                }
            },
            uploadSuccess(response, file, fileList) {
                this.excel_path = response.data.src;
                this.getSheets();
                this.div_show1 = false;
                this.div_show2 = true;
                this.div_show3 = false;
            },
            handleClick(tab, event) {
                this.getDataForSheet(this.activeName);
            }
        }
    });
</script>
</html>